<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div{
        width: 64px;
        height: 127px;
        background: url(image/run.png) no-repeat;
        background-position: -128px -256px;
        position: absolute;
        top: 100px;
        left:100px;
      }
    </style>
  </head>
  <body>
    <div class="">

    </div>
    <script type="text/javascript">
        // 第一步获取这个dom
        // 第二步，改变left
        // var dom = document.createElement("div");
        // document.body.appendChild(dom);
        var  oDiv = document.getElementsByTagName("div")[0];
        var nowleft = 0;
        var foot = 1;
        //
        setInterval(function(){
          nowleft += 2;
          foot ++;
          if (foot > 7) {
            foot = 0;
          }
            oDiv.style.left = nowleft + "px";
              // background-position: -128px -256px;
          oDiv.style.backgroundPosition = -foot * 64 + "px -256px";
        },30)

        var  oDiv = document.getElementsByTagName("div")[0];
        var nowleft = 0;
        var foot = 1;
        //
        setInterval(function(){
          nowleft += 2;
          foot ++;
          if (foot > 7) {
            foot = 0;
          }
            oDiv.style.left = nowleft + "px";
              // background-position: -128px -256px;
          oDiv.style.backgroundPosition = -foot * 64 + "px -256px";
        },30)
    </script>
  </body>
</html>
